About the TreeView WebControls Client Behavior

  • Article

The TreeView client-side component is a Dynamic HTML (DHTML) behavior that defines custom elements. You can use the behavior and its custom elements to author UIs that represent hierarchical data. The following illustration shows an example of a tree view.

TreeView Example

The TreeView, like the other Windows Internet Explorer WebControls Client Behaviors, is an element behavior. It is not lightweight; it is a viewlink, and its contents are treated as literal content.

This overview provides practical examples that illustrate how to author and use the TreeView object. The TreeView object interacts with the TreeView behavior, which is one of four WebControls Client Behaviors. The other WebControls Client Behaviors are the Toolbar, the TabStrip, and the MultiPage. In order to author Web pages with any of these controls, a similar set of prerequisites apply. For general information on the WebControls Client Behaviors, see Internet Explorer WebControls. For download and setup information, see Internet Explorer WebControls Download.

In most scenarios, you can author a tree view declaratively. However, you can also program this control extensively on the client or server. This overview covers the client implementation and use of the TreeView object that interacts with the TreeView Client Behavior. For information on programming the TreeView server control, see About the TreeView WebControl.

This document includes the following sections.

  • Prerequisites 
  • Tree View Elements 
  • Writing a Simple Tree View 
  • Formatting 
    • Defining a TreeNodeType 
    • Customizing Tree Nodes by their Depth 
    • Applying Styles 
  • Keyboard Navigation 
  • Data Binding 
    • Data Binding with XML and XSL Templates 
  • Dynamically Creating Tree Nodes 
  • Using TreeView Events 
  • Creating Custom ToolTips 
  • Related Topics

Prerequisites

In order to use the TreeView Client Behavior as described in this article, you should be familiar with Microsoft JScript and DHTML. Knowledge of element behaviors is also helpful. Some of the more advanced examples in this article assume a basic familiarity with XML (Extensible Markup Language).

The TreeView Client Behavior is an element behavior, and as such requires Microsoft Internet Explorer 5.5 or later.

You must download and install the WebControls at Internet Explorer WebControls Download.

Tree View Elements

You can author the tree view using a combination of one or more of the following elements, which are supported by the client-side TreeView behavior.

Element Name Description
TREEVIEW Defines a TreeView.
TREENODETYPE Defines a node type, which applies to a node or a group of nodes in a TreeView.
TREENODE Creates a node in a TreeView.

The TREEVIEW element is a container for TREENODE and TREENODETYPE elements. Collectively, they define the structure, layout, and rendering of a tree view. A tree view cannot contain any HTML content other than these three elements.

The TREEVIEW element can contain an unlimited number of TREENODETYPE elements, provided that sufficient resources are available on the client and host computers. Use TREENODETYPE elements to define the styles, images, and other behaviors for TREENODE elements. You can group TREENODE elements by their TYPE, which enables you to format and modify them with the TREENODETYPE element. TREENODETYPE elements must be children of the TREEVIEW element and must occur before the first TREENODE element.

The TREENODE element can only contain other TREENODE elements. However, you can embed HTML content into a TREEVIEW by assigning it to the TEXT attribute of a TREENODE element. The TEXT content of a TREENODE element renders as HTML, rather than as plain text. Therefore, the only way to render HTML in a tree view is to assign it to the TEXT attribute of a TREENODE element.

Writing a Simple Tree View

This section contains the steps required to create a simple tree view. You can complete these steps using any text editor.

  1. Create an HTML file. This file should contain the standard HTML tags, including HTML, HEAD, and BODY. Add a namespace declaration for the tree view to the BODY element. Your file should look like the following example.

    <HTML XMLNS:mytree><HEAD></HEAD><BODY></BODY></HTML>

  2. Add the import directive in the HEAD section of the document. The namespace name must match the namespace declared in the HTML element.

    <?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/>

    Important  The implementation path must point to the location of the TreeView behavior (treeview.htc) relative to the HTML file.

  3. Add a TREEVIEW element to the BODY section of the document, as in the following example.

    <mytree:TREEVIEW ID="oTree">
</mytree:TREEVIEW>

    At this point, the TREEVIEW element doesn't contain any nodes, so nothing renders in the Web page.

    Note  The tag prefix, mytree, is used for all TREEVIEW elements on the page. This prefix must match the namespace in the IMPORT directive.

  4. Add a TREENODE element to the TREEVIEW element. Add a TEXT attribute and assign the value Root Node to it.

    <mytree:TREENODE
   TEXT="Root Node">
</mytree:TREENODE>

  5. Name the file something meaningful. Give it an .htm file extension, and save it to the directory where the treeview.htc is located. Typically, this directory is \Program Files\Microsoft Web Controls 1.0\aspnet_client\webctrl\1_0\ on the WebControls installation drive. Conversely, you can create a new directory for your HTML file and save a copy of the treeview.htc to this directory.

  6. View the page in your browser. If everything is correct, you should see only a TreeView with one TREENODE, the root node.

    Your tree view should look like the following example.

    Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step1.htm

    Because there is only one TREENODE element, it is the root node and it has the focus. The background color is the default style, and you can override this by setting the appropriate properties. You can select the node by clicking it.

  7. Add a second TREENODE element as a child of the first TREENODE element.

    <HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/></HEAD>
<BODY>
<mytree:TREEVIEW ID="oTree">

<mytree:TREENODE
TEXT="Root Node">

<mytree:TREENODE
TEXT="Child Node">

</mytree:TREENODE>
</mytree:TREENODE>

</mytree:TREEVIEW>
</BODY>
</HTML>

  8. Save and render the page. The following example shows the initial state of the tree view.

    Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step2.htm

The tree view initially renders only the root TREENODE element, and it has a graphic that indicates it is expandable. The tree node can be expanded or collapsed by clicking on the plus (+) or minus (-) sign, respectively. This sample illustrates that the default state of a tree node in a tree view is collapsed. You can control the initial state of a TREENODE element by setting its EXPANDED attribute.

This concludes the basic tree view sample. The following examples illustrate additional properties and features of the TreeView.

Formatting

This section describes some useful techniques for customizing the appearance of a tree view UI. TREEVIEW elements can contain formatting attributes that affect all of the applicable elements in the TreeView.  You can format TREENODE elements individually using attributes applied directly to the TREENODE element.

Groups of TREENODE elements with the same TYPE attribute can also be modified. This is helpful when you want to render a unique graphic or other formatting attribute for each level of a tree view, according to its depth in the tree view and the style of its parent elements. The TreeView behavior provides properties to cover all these possibilities.

It makes sense to define some attributes, like the SYSTEMIMAGESPATH attribute, at the level of the TREEVIEW element. These attributes affect all applicable elements in the TreeView. The SYSTEMIMAGESPATH attribute should point to the directory, relative to the client code, containing the supporting tree images, like plus and minus signs used to display when a tree node is expanded or collapsed. All of these images would likely be kept in the same directory and thus it makes sense to set this attribute at the level of the TREEVIEW element.

Note  The default path for the SYSTEMIMAGESPATH attribute is /treeimages in the directory where treeview.htc is located. If the images are located in this directory, it is not necessary to set the SYSTEMIMAGESPATH attribute.

Defining a TreeNodeType

In cases where a group of TREENODE elements share the same characteristics, it is useful to create a TREENODETYPE element. You can apply attributes set on the TREENODETYPE element to the TREENODE element using the TYPE attribute.

The following sample renders a tree view for a small collection of states and cities. Use a TREENODETYPE element to define a Folder node TYPE attribute as a first step toward customizing the appearance of the nodes.

The EXPANDEDIMAGEURL and IMAGEURL properties override the use of the default TreeView images for expanded and normal node rendering, respectively. It is also possible to define an image for nodes that are selected but not expanded using the SELECTEDIMAGEURL attribute. A node can be selected but not expanded when it has no child nodes.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/></HEAD>
<BODY>
<mytree:TREEVIEW  CHILDTYPE="Folder">
<mytree:TREENODETYPE TYPE="Folder"
 EXPANDEDIMAGEURL="images/folderopen.gif" IMAGEURL="images/folder.gif"/>
      <mytree:TREENODE TEXT="Michigan">
         <mytree:TREENODE TEXT="Detroit"/>
         <mytree:TREENODE TEXT="Farmington"/>
         <mytree:TREENODE TEXT="Southfield"/>
      </mytree:TREENODE>
      <mytree:TREENODE TEXT="Washington">
         <mytree:TREENODE TEXT="Bellevue"/>
         <mytree:TREENODE TEXT="Redmond"/>
         <mytree:TREENODE TEXT="Woodinville"/>
      </mytree:TREENODE>
</mytree:TREEVIEW>                                                 
</BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step3.htm

This sample illustrates the use of the TREENODETYPE element, which is useful for formatting and structuring the layout and appearance of a tree view. One approach to using the TREENODETYPE element is to define a TREENODETYPE element and then to specify the TYPE attribute on each TREENODE element that shares that type.

A second, more efficient approach to using the TREENODETYPE element is to define a CHILDTYPE attribute. In the previous example, the CHILDTYPE attribute is specified as Folder on the TREEVIEW element. Having declared the Folder CHILDTYPE on the TREEVIEW element, it is necessary to define this type using the TREENODETYPE element. The TREENODETYPE element in the sample, therefore, has the TYPE attribute set to the same value of Folder.

Because the CHILDTYPE attribute is specified on the TREEVIEW element, which is the container element for the entire tree, this has the effect of attributing all TreeNode elements with a TYPE equal to Folder. Clearly, this approach is far more efficient than it would be to add the TYPE attribute to each node.

Customizing Tree Nodes by their Depth

In the next example, a few minor additions are made to the previous code, yielding customized folder icons for each level of the tree view. Two levels of TREENODE elements are used: nodes representing cities are nested inside nodes representing states.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/></HEAD>
<BODY>
<mytree:TREEVIEW  CHILDTYPE="Folder">
<mytree:TREENODETYPE TYPE="Folder"
 EXPANDEDIMAGEURL="images/folderopen.gif" IMAGEURL="images/folder.gif" CHILDTYPE="City"/>
<mytree:TREENODETYPE TYPE="City" IMAGEURL="images/html.gif"/>
    <mytree:TREENODE TEXT="Michigan">
        <mytree:TREENODE TEXT="Detroit"/>
        <mytree:TREENODE TEXT="Farmington"/>
        <mytree:TREENODE TEXT="Southfield"/>
    </mytree:TREENODE>
    <mytree:TREENODE TEXT="Washington">
        <mytree:TREENODE TEXT="Bellevue"/>
        <mytree:TREENODE TEXT="Redmond"/>
        <mytree:TREENODE TEXT="Woodinville"/>
    </mytree:TREENODE>
</mytree:TREEVIEW>                                                 
</BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step4.htm

Notice that the CHILDTYPE attribute is used on the TREEVIEW element and the first TREENODETYPE elements. The TREEVIEW element defines its children as having the Folder type and the first TREENODETYPE element defines its children as having the City type. In this case, the second TREENODETYPE element has no CHILDTYPE because this element defines the deepest TREENODETYPE element in the TREEVIEW.

Applying Styles

The WebControls Client Behaviors provide special attributes for customizing the appearance of elements based on their current state. This means that the elements of a tree view UI may render differently based on a user's interaction. Two factors determine the rendered formatting of TREENODE elements: the state of the element and where the style for the element is defined.

A TREENODE element has three states.

  1. Default—The TREENODE is neither hovered over nor selected.
  2. Hovered—The mouse pointer is over the TREENODE and is not selected.
  3. Selected—The TREENODE is the selected node on the tree view.

Order of precedence is based first on TREENODE state and then by style hierarchy within the state.

The hierarchy for applying styles to a TREENODE within each state is as follows.

  1. Built-in—The TreeView behavior applies these styles to the tree node.
  2. Tree View—These styles are defined on the TREEVIEW element.
  3. Tree Node Group—These styles are defined on the TREENODETYPE element.
  4. Tree Node Element—These styles are defined on the TREENODE element.

Style is applied in the following order.

  1. The default style built into the behavior.
  2. The DEFAULTSTYLE attribute set on the TREEVIEW element.
  3. The DEFAULTSTYLE attribute set on the TREENODETYPE element.
  4. The DEFAULTSTYLE attribute set on the TREENODE element.
  5. The hover style built into the behavior.
  6. The HOVERSTYLE attribute set on the TREEVIEW element.
  7. The HOVERSTYLE attribute set on the TREENODETYPE element.
  8. The HOVERSTYLE attribute set on the TREENODE element.
  9. The selected style built into the behavior.
  10. The SELECTEDSTYLE attribute set on the TREEVIEW element.
  11. The SELECTEDSTYLE attribute set on the TREENODETYPE element.
  12. The SELECTEDSTYLE attribute set on the TREENODE element.

Note  The style set for each state supersedes the one before it. For example, if the mouse pointer is over an unselected TREENODE, the HOVERSTYLE applies to the TREENODE rather than the DEFAULTSTYLE. Or, if the mouse pointer is over the selected TREENODE, the style remains the SELECTEDSTYLE.

With each of these attributes, one or more Cascading Style Sheets (CSS) attribute/value pairs can be defined. The format used is identical to the use of the standard CSS style attribute. Most commonly used styles that are used to apply fonts, colors and dimensions are supported, but not all CSS styles are supported by the WebControls Client Behaviors.

The following example shows some of the most common styles that you can use to affect the rendering of the nodes in the tree view.

<mytree:TREENODE TEXT="My Stylish Node" 
DEFAULTSTYLE="background:#CCCCCC;border:solid 1px;color:black;font-size:8pt"
HOVERSTYLE="color:blue;font-name:Arial"
SELECTEDSTYLE="color:red;font-name:Arial;font-weight:bold"/>

For text formatting, another possibility is to apply HTML directly to the TEXT attribute. In fact, the TEXT attribute is the only way to render HTML content in a tree view. Any valid HTML can be rendered in this manner.

<mytree:TREENODE TEXT="<TABLE COLS=2 BORDER=1><TR><TD>HTML content</TD>
<TD>in</TD></TR><TR><TD>TREENODES</TD>
<TD>is a snap with the TEXT attribute</TD></TR></TABLE>"/>

Keyboard Navigation

The WebControls Client Behaviors are rich controls that support both mouse and keyboard operation. The TreeView behavior provides support for two intrinsic types of keyboard navigation—the TAB key and the ARROW keys. The TAB key navigates between the tree view and the Address bar in Internet Explorer 5.5. When the focus is on the tree view, the selected node retains its selection status.

The UP and DOWN ARROW keys provide a means of moving up and down the tree view. The LEFT and RIGHT ARROW keys collapse and expand the nodes in the tree view. Unless the AUTOSELECT attribute is set to true, the ARROW keys hover rather than select nodes on the tree. The default value for the AUTOSELECT attribute is false, which means that a node is selected only after the ENTER key is pressed.

Data Binding

The TreeView behavior also supports data binding, which enables the generation of dynamic content. The following samples render tree views similar to the previous samples but instead of using static content XML files provide data source for the UI.

The following example uses the TREENODESRC attribute to bind to the state_city.xml file, which populates the tree view. As the example shows, the markup is concise.

<mydbtree:TREEVIEW>
    <mydbtree:TREENODE TEXT="North America" IMAGEURL="images/root.gif" 
    EXPANDED="true" TREENODESRC="state_city.xml">
    </mydbtree:TREENODE>
</mydbtree:TREEVIEW>

The EXPANDED attribute is set to true to make the children of the root node display when the tree view first loads.

The XML file used as the data source for the TREENODESRC attribute must contain opening and closing TREENODES tags. The state_city.xml file used in the previous code sample is a good example. The XML file should look like the following example.

<TREENODES>
    <TREENODE TEXT="Michigan">
        <TREENODE TEXT="Detroit"/>
        <TREENODE TEXT="Farmington"/>
        <TREENODE TEXT="Southfield"/>
    </TREENODE>
    <TREENODE TEXT="Washington">
        <TREENODE TEXT="Bellevue"/>
        <TREENODE TEXT="Redmond"/>
        <TREENODE TEXT="Woodinville"/>
    </TREENODE>
</TREENODES>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step5.htm

The next example shows how to use the TREENODETYPESRC attribute with XML. In this example, two XML files are used: one for the tree nodes and one for the node types. This builds on the first data binding example by adding additional customization to the UI.

Only a single TREEVIEW element is used in the markup for the Web page, as shown in the following example.

<mydbtree:TREEVIEW
    TREENODETYPESRC="state_city_types.xml"
    TREENODESRC="state_city_for_types.xml">
</mydbtree:TREEVIEW>

The XML file for the TREENODESRC now includes a TYPE attribute on the TREENODE elements to link the TREENODETYPE to the TREENODE.

<TREENODES>
    <TREENODE TEXT="North America" TYPE="Root">
    <TREENODE TEXT="Michigan" TYPE="Folder">
        <TREENODE TEXT="Detroit" TYPE="File"/>
        <TREENODE TEXT="Farmington" TYPE="File"/>
        <TREENODE TEXT="Southfield" TYPE="File"/>
    </TREENODE>
    <TREENODE TEXT="Washington" TYPE="Folder" >
        <TREENODE TEXT="Bellevue" TYPE="File"/>
        <TREENODE TEXT="Redmond" TYPE="File"/>
        <TREENODE TEXT="Woodinville" TYPE="File"/>
    </TREENODE>
    </TREENODE>
</TREENODES>

Similar to the XML file used as the data source for the TREENODESRC attribute, the XML file associated with the TREENODETYPESRC attribute must contain opening and closing TREENODETYPES tags. The content of the state_city_types.xml file looks like the following example.

<TREENODETYPES>
    <TREENODETYPE TYPE="file" IMAGEURL="images/html.gif" />
    <TREENODETYPE TYPE="folder" IMAGEURL="images/folder.gif" />
    <TREENODETYPE TYPE="root" IMAGEURL="images/root.gif" />
</TREENODETYPES>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step6.htm

Warning  The TREENODES and TREENODETYPES elements in a data binding source document must be uppercase for the data binding to work.

Data Binding with XML and XSL Templates

In certain scenarios, it may be necessary to use XML data that is read-only and that may also be in a format that cannot be directly used to data bind to the tree view. The TreeView supports Extensible Stylesheet Language Transformations (XSLT) templates, which can be used to transform an XML file into the correct format and structure. XSLT can be used to transform XML files for data binding with both the TREENODE and TREENODETYPE elements.

The following example shows how the data in one XML file can populate one or more TREENODE elements according to the XSLT template assigned to each TREENODE using the TREENODEXSLTSRC attribute. The data in the XML file that is not used by the XSLT templates is not displayed.

The following example shows the markup for the TREEVIEW element, which binds to an XML file, fileLog.xml, and two XSLT files, missing.xslt and error.xslt.

<HTML XMLNS:mydbtree>
<HEAD><?IMPORT NAMESPACE="mydbtree" IMPLEMENTATION="treeview.htc"/></HEAD>
<BODY>
<mydbtree:TREEVIEW>
<mydbtree:TREENODE TEXT="Error Report"  
 EXPANDED="true">
<mydbtree:TREENODE TEXT="Missing" TREENODESRC="fileLog.xml"
TREENODEXSLTSRC="missing.xslt"/>
<mydbtree:TREENODE TEXT="Errors" TREENODESRC="fileLog.xml"
 TREENODEXSLTSRC="error.xslt"/>
</mydbtree:TREENODE>
</mydbtree:TREEVIEW>                                                 
</BODY>
</HTML>

The XSLT files transform the source XML into the correct format for the individual TREENODE elements. The missing.xslt file should look like the following example.

<?xml  version='1.0'?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/toclog">
        <TREENODES>
        <xsl:for-each select="missing">
            <xsl:sort select="./path"/>
            <xsl:element name="TREENODE">
                <xsl:attribute name="TEXT">
                    <xsl:value-of select="path"/>
                    <xsl:value-of select="predicate"/>
                </xsl:attribute>
            </xsl:element>
        </xsl:for-each>  
        </TREENODES>
    </xsl:template>
</xsl:stylesheet>

The error.xslt file is similar to missing.xslt. as shown by the following example.

<?xml  version='1.0'?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/toclog">
        <TREENODES>
        <xsl:for-each select="error">
            <xsl:sort select="."/>
            <xsl:element name="TREENODE">
                <xsl:attribute name="TEXT">
                    <xsl:value-of select="."/>
                </xsl:attribute>
            </xsl:element>
        </xsl:for-each>  
        </TREENODES>
    </xsl:template>
</xsl:stylesheet>

Finally, the XML data file, fileLog.xml, contains the following data. Only the error and missing nodes display in the tree view. The invalid nodes are not used by the XSLT files and are therefore not displayed.

<toclog>
    <error> V:\data\online\file02.htm</error>
    <missing>
        <path>/data/online/file20.htm</path>
        <predicate> was not found.</predicate>
    </missing>
    <error> V:\data\online\file21.htm</error>
    <missing>
        <path>/data/online/file22.htm</path>
        <predicate> was not found.</predicate>
    </missing>
    <invalid>
        <prefix>File30 contains invalid markup - </prefix>
        <path>/data/online/file30.htm</path>
    </invalid>
    <missing>
        <path>/data/online/file23.htm</path>
        <predicate> was not found.</predicate>
    </missing>
    <error> V:\data\online\file24.htm</error>
    <missing>
        <path>/data/online/file25.htm</path>
        <predicate> was not found.</predicate>
    </missing>
    <invalid>
        <prefix>File04 contains a path to an invalid page - </prefix>
        <path>/data/online/file04.htm</path>
    </invalid>
    <error> V:\data\online\file31.htm</error>
    <missing>
        <path>/data/online/file32.htm</path>
        <predicate> was not found.</predicate>
    </missing>
    <error> V:\data\online\file33.htm</error>
    <error> V:\data\online\file34.htm</error>
    <error> V:\data\online\file40.htm</error>
    <error> V:\data\online\file44.htm</error>
    <missing>
        <path>/data/online/file45.htm</path>
        <predicate> was not found.</predicate>
    </missing>    
</toclog>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step7.htm

Dynamically Creating Tree Nodes

In some instances, the best way to create a tree view is to add the nodes dynamically. The TreeView behavior provides a createTreeNode method and two methods for adding nodes to a TreeView object: the add method, and the addAt method. The addTo method provides an additional method for adding TreeNode and TreeNodeType objects. These three methods are designed for different purposes and act upon different objects. The following examples demonstrate these differences.

The add method is the simplest of the methods and takes as a parameter the TreeNode object to add to the end of the node collection. When the add method is applied to the TreeView object, the new TreeNode is a child of the TreeView object and is therefore also a root-level TreeNode. When the add method is applied to a TreeNode object, the new node is a child of that TreeNode object.

In the following example, a TreeNode object is created on the TreeView with the id of oTree. Next, attributes for the TreeNode are added using the setAttribute method and the new TreeNode is added to the end of the TreeView using the add method. The new node is the last TreeNode at the root level in the TreeView.

function loadNewTreeNode(){
    var newNode = oTree.createTreeNode();
    newNode.setAttribute("text", "Root Node");
    oTree.add(newNode);
    }

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step13.htm

Important  The only way to set and get attributes of the TreeNode or TreeNodeType objects is to use the getAttribute and setAttribute methods.

Like the add method, the addAt method is a method of both the TreeView object and the TreeNode object and takes as a parameter the TreeNode object that is being added. The addAt method, however, allows more control when placing the TreeNode by providing an index parameter that defines where the TreeNode appears in the TreeView.

The following example adds a child TreeNode to the beginning of the node collection. The getTreeNode method returns the TreeNode object where the new node is added.

function addAtNode(){
    var parentNode = oTree.getTreeNode("0");
    var newNode = oTree.createTreeNode();
    newNode.setAttribute("text", "New Child Node");
    parentNode.addAt(0, newNode);
    }

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step14.htm

Unlike the add and addAt methods, the addTo method acts upon the TreeNode object being added to the TreeNode or TreeView object. The index specifies the placement of the TreeNode.

In the following example, notice that the addTo method is a method of the child TreeNode object rather than of the parent TreeNode object.

function addToNode(){
    var parentNode = oTree.getTreeNode("0");
    var newNode = oTree.createTreeNode();
    newNode.setAttribute("text", "New Child Node");
    newNode.addTo(0, parentNode);
    }

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step15.htm

Using TreeView Events

The easiest way to handle events with the TreeView behavior is to use the event attribute of an element in inline HTML, as in the following example, which uses the onexpand event of the TreeView to display a message box when a TreeNode is expanded.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/>
</HEAD>
<BODY>
<mytree:TREEVIEW ONEXPAND=alert("Expanding");>
    <mytree:TREENODE TEXT="Michigan" IMAGEURL="images/html.gif" >
    <mytree:TREENODE TEXT="Detroit" IMAGEURL="images/html.gif"/>
    </mytree:TREENODE>
 </mytree:TREEVIEW>                                                 
</BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step8.htm

No script is used in the previous example, but if any custom processing is required in response to an event, you need to add an event handler function that contains the code you want to run when the event occurs. The following is a modified version of the previous example that uses an event handler function.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/>
<SCRIPT>
function ExpandingAlert()
{alert("Expanding");
// This is where you would add custom code.
}
</SCRIPT>
</HEAD>
<BODY>
<mytree:TREEVIEW ONEXPAND=ExpandingAlert()>
    <mytree:TREENODE TEXT="Michigan" IMAGEURL="images/html.gif">
    <mytree:TREENODE TEXT="Detroit" IMAGEURL="images/html.gif"/>
    </mytree:TREENODE>
</mytree:TREEVIEW>                                                 
</BODY>
</HTML>

To handle events of a TreeView object using script, another option is to use a named script, as in the following example.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/>
<SCRIPT FOR=oTree EVENT=onexpand>
alert("Expanding");
</SCRIPT>
</HEAD>
<BODY>

<mytree:TREEVIEW ID="oTree">
    <mytree:TREENODE TEXT="Michigan" IMAGEURL="images/html.gif" >
    <mytree:TREENODE TEXT="Detroit" IMAGEURL="images/html.gif"/>
    </mytree:TREENODE>
</mytree:TREEVIEW>                                                 
</BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step9.htm

In addition to using events to trigger an action, event properties can be accessed to provide information about the event.

This example demonstrates how to use the onselectedindexchange event to call the event handler function that retrieves the value of the oldTreeNodeIndex and of the newTreeNodeIndex properties of the event object.

<HTML XMLNS:mytree>
<HEAD><?IMPORT NAMESPACE="mytree" IMPLEMENTATION="treeview.htc"/>
<SCRIPT>
   function myFunction(){
   var oldIndex= window.event.oldTreeNodeIndex;
   var newIndex= window.event.newTreeNodeIndex;
   alert("The value of the oldTreeNodeIndex property is  " + oldIndex + 
      "\nThe value of the newTreeNodeIndex property is  " + newIndex);
}

</SCRIPT>
</HEAD>
<BODY>

<mytree:TREEVIEW ID="oTree" ONSELECTEDINDEXCHANGE=myFunction() >
   <mytree:TREENODE TEXT="Michigan">
   <mytree:TREENODE TEXT="Detroit"/>
   <mytree:TREENODE TEXT="Farmington"/>
   <mytree:TREENODE TEXT="Southfield" />
   </mytree:TREENODE>
   <mytree:TREENODE TEXT="Washington">
   <mytree:TREENODE TEXT="Bellevue"/>
   <mytree:TREENODE TEXT="Redmond"/>
   <mytree:TREENODE TEXT="Seattle"/>
   </mytree:TREENODE>
</mytree:TREEVIEW>                                    
</BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step11.htm

Creating Custom ToolTips

The TreeView behavior provides a default ToolTip that displays when a user hovers over a TREENODE element. You may want your users to have more specific information than is provided by the default ToolTip (Use +/- to expand/collapse) accessed by the SHOWTOOLTIP attribute. You can accomplish this by creating three simple DHTML functions that use the ONHOVER and ONUNHOVER events to replace the default ToolTip.

The following sample shows what these methods might look like. The sample uses the TEXT attribute of the TreeNode object as the ToolTip text, but you could customize this to provide any information that you choose.

// ToolTip functions include starthover(), starttip(), and endtip()
    
    // ToolTip variables
    var myTimer;
    var nodeText;
    var tipX;
    var tipY;

function starthover()
{
    var myVal = window.event.treeNodeIndex;
    var myNode = oTree.getTreeNode(myVal);

    nodeText = myNode.getAttribute("text");
    tipX = window.event.clientX + 15;
    tipY = window.event.clientY + 15;

    myTimer = window.setTimeout(starttip, 1000);
}

function starttip()
{
    results1.style.backgroundColor = "infobackground";
    results1.style.position = "absolute";
    results1.style.left = tipX;
    results1.style.top = tipY;
    results1.style.border = "1px solid black";
    results1.innerText = nodeText;

    myTimer = window.setTimeout(endtip, 5000);
}

function endtip()
{
    results1.style.backgroundColor = "";
    results1.innerText = "";
    results1.style.border = "";
    window.clearTimeout(myTimer);
}
</HEAD>
    <BODY>
    <mytree:TREEVIEW id="oTree" TREENODESRC="state_city.xml"
    SHOWTOOLTIP="false" ONHOVER="starthover();" ONUNHOVER="endtip();" />
<!--This DIV is required to display the ToolTips-->
    <DIV id=results1></DIV>
    </BODY>
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/treeview/client_ovw_step10.htm